<template>
  <div class="view-wrapper">
    <div class="main">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="140px"
        class="demo-ruleForm"
        :disabled="disabled"
      >
        <div class="txt">编辑排期</div>
        <el-row>
          <el-col :span="18">
            <el-form-item label="直播排期：" prop="industryType">
              <div>{{info.workforceDate}}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="直播时间：" prop="industryType">
              <div>{{info.liveTime}}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
              <el-form-item label="直播地点：" prop="industryType">
                <div>{{info.liveRoomName}}</div>
              </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="主播姓名：" prop="industryType">
              <div>{{info.anchorListName}}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="中控人员姓名：" prop="industryType">
              <div>{{info.centerControlListName}}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="关联服务工单：" prop="serviceItemRecordId">
              <el-select
                v-model="ruleForm.serviceItemRecordId"
                filterable
                placeholder="请选择"
                size="small"
              >
                <el-option
                  v-for="item in serviceItemRecordList"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-button type="primary" @click="addClick" style="margin-left: 20px">创建服务工单</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="备注：" prop="">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 8}"
                placeholder="请输入内容"
                v-model="ruleForm.remark"
                maxlength="200">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="button_box">
        <el-button @click="handleClose">取消</el-button>
        <el-button
          type="primary"
          :loading="AgreeLoading"
          @click="submitForm('ruleForm')"
          >保存提交</el-button
        >
      </div>
    </div>
    <Dialog v-bind="$attrs" v-if="dialogVisible" :id="id" :pathType="pathType" :visible.sync="dialogVisible" @success="_handleSuccess">
    </Dialog>
  </div>
</template>
      
<script>
import {
  scheduleDetail,
  recordSelect,
  editSchedulet
} from "@/api/customer/rowDateList";
import Dialog from "./components/dialog";


export default {
  name: "",
  components: {
    Dialog,
  },
  data() {
    return {
      dialogId: "",
      dialogVisible: false,
      // 遮罩层
      loading: false,
      AgreeLoading: false, //按钮loading
      info: {},
      serviceItemRecordList:[],
      // 参数
      ruleForm: {
        id: "", //id
        remark: "", //备注
        serviceItemRecordId: "", //关联服务工单
      },
      rules: {
        serviceItemRecordId: [
          { required: true, message: "请选择", trigger: ["change"] },
        ],
      },
    };
  },
  computed: {
    ExportParams() {
      const params = {
        ids: this.ids,
      };
      return params;
    },
  },
  created() {
    this.ruleForm.id = this.$route.query.id
    this.getServiceItemRecordList()
    this.getDetail();

  },
  methods: {
    getDetail(){
      scheduleDetail(this.ruleForm.id).then(res => {
        this.info = res.result
        this.ruleForm.serviceItemRecordId = res.result.serviceItemRecordId  
        this.ruleForm.remark = res.result.remark  
      })
    },
    //服务工单下拉
    getServiceItemRecordList() {
      var data = {
        id: this.ruleForm.id
      }
      recordSelect(data)
        .then((res) => {
          this.serviceItemRecordList = res.result;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //创建服务工单
    addClick(){
      this.dialogVisible = true
    },
    handleClose(){
      this.$router.back()
    },
    _handleSuccess(e) {
      //成功回调
      this.dialogVisible = false;
      this.getServiceItemRecordList()
      this.ruleForm.serviceItemRecordId = e
    },

    submitForm(formName) {
      console.log(this.ruleForm);
      //创建确定
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.AgreeLoading = true;
          var data = {
            ...this.ruleForm,
          };
          editSchedulet(data).then((res) => {
            this.handleClose();
            this.$message.success("修改成功");
            this.AgreeLoading = false;
          })
          .finally(() => {
            this.AgreeLoading = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style  lang="scss" scoped>
.main {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 14px;
}
.button_box {
  display: flex;
  justify-content: center;
}
.el-select{
  width: 340px;
}
</style>
        